<template>
	<view class="pageContent" :class="{active : carInfo.carStatus !==1 }">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="listItem" v-for="(item,index) in list" :key="index">
				<view class="text-line">
					<text class="text-name">维修厂:</text>
					<text class="text-value">{{item.serviceName}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">送车时间:</text>
					<text class="text-value">{{item.repairStartDate|filterNull}}</text>
				</view>
				<view class="text-line" v-if="item.repairStatus==2">
					<text class="text-name">取车时间:</text>
					<text class="text-value">{{item.repairEndDate|filterNull}}</text>
				</view>
				<view class="text-line" v-if="item.repairStatus==2">
					<text class="text-name">费用合计:</text>
					<text class="text-value">{{item.totalPay|filterNull}}</text>
				</view>
				<view class="text-line" v-if="item.repairStatus==2">
					<text class="text-name">付款方:</text>
					<text class="text-value">{{item.payer|payer}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">关联订单:</text>
					<text class="text-value">{{item.orderNo|filterNull}}</text>
				</view>
				<view class="text-line" v-if="item.repairStatus==2">
					<text class="text-name">记录人:</text>
					<text class="text-value">{{item.updateName|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">维修项目:</text>
					<text class="text-value">{{item.maintainRemark|filterNull}}</text>
				</view>
				<view class="text-line" v-if="item.repairStatus==2">
					<text class="text-name">备注:</text>
					<text class="text-value">{{item.remark|filterNull}}</text>
				</view>
				<view class="text-line" v-if="item.repairStatus==2">
					<text class="text-name">附件</text>
				</view>
				<view style="padding: 0 24rpx;">
					<u-album :urls="item.imgList"></u-album>
				</view>
				<!-- 完成维修 -->
				<view class="bottomView" v-if="item.repairStatus==1">
					<view class="btn" @click="finishWb(item)">完成维修</view>
				</view>
			</view>
		</mescroll-body>
		<view style="height: 150rpx;"></view>
		<button  v-if="carInfo.carStatus == 1 && findIndex==-1" type="info" class="sub-btn" @click="add">新增车辆维修</button>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		listRepairMaintain
	} from '@/api/car-api.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				carInfo: {},
				list: [],
				findIndex: -1,
			}
		},
		onLoad(op) {
			this.carInfo = op;
			uni.$on('refreshRepair',()=>{
				this.mescroll.triggerDownScroll();
			})
		},
		methods: {
			upCallback(page) {
				let param={
					pageNum: page.num,
					pageSize: page.size,
					carPlateNo: this.carInfo.carNo,
					type: 2,
				}
				listRepairMaintain(this.toParams(param)).then(res => {
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
					if (this.list.length > 0) {
						this.findIndex = this.list.findIndex(item=>item.repairStatus==1);
					}
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			finishWb(item) {
				uni.navigateTo({
					url: './finish?item=' +encodeURIComponent(JSON.stringify(item))
				})
			},
			add() {
				uni.navigateTo({
					url: './add?carNo=' + this.carInfo.carNo+'&carId='+this.carInfo.id
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	.pageContent {
	   padding-bottom: 120rpx;
	   &.active {
		   padding-bottom: 0;
	   }
	}
	.listItem {
		margin: 12rpx 24rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.bottomView {
		margin-top: 20rpx;
		border-top: 1rpx solid #f5f5f5;
		padding: 20rpx 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.btn {
			width: 160rpx;
			line-height: 60rpx;
			text-align: center;
			background-color: #1573FF;
			color: #fff;
			font-size: 28rpx;
			border-radius: 30rpx;
		}
	}
</style>
